/**
 * 阶梯折线图组件
 */

import React from 'react';
import { Line } from 'react-chartjs-2';
import { ChartData, ChartOptions, SteppedLineChartCustomOptions } from '../types';

interface SteppedLineChartProps {
  data: ChartData;
  options?: ChartOptions;
  height?: number;
  customOptions?: SteppedLineChartCustomOptions;
}

const SteppedLineChart: React.FC<SteppedLineChartProps> = ({
  data,
  options,
  height = 400,
  customOptions,
}) => {
  const lineData = {
    ...data,
    datasets: data.datasets.map(dataset => ({
      ...dataset,
      type: 'line',
      fill: false,
      tension: 0,
      stepped: (customOptions?.stepped ?? true) as any,
      pointRadius: customOptions?.pointRadius ?? 3,
      pointHoverRadius: customOptions?.pointHoverRadius ?? 5,
      borderWidth: customOptions?.borderWidth ?? (dataset as any).borderWidth ?? 2,
    })),
  } as any;

  const chartOptions: any = {
    ...options,
    scales: {
      x: {
        beginAtZero: false,
      },
      y: {
        beginAtZero: true,
      },
    },
  };

  return <Line data={lineData} options={chartOptions} height={height} />;
};

export default SteppedLineChart;


